<!--
  功能：功能描述
  作者：王代彬
  时间：2021年01月18日 12:26:14
  版本：v1.0
-->
<template>
	<div class="left-box" :style="boxStyle">
		<div ref="lineRef" class="resize3" @mousedown="onmousedown"></div>
	</div>
</template>

<script>
export default {
	name: 'demo',
	props: {},
	components: {},
	data () {
		return {
			boxStyle: {
				width: '200px'
			}
		}
	},
	filters: {},
	computed: {},
	watch: {},
	methods: {
		onmousedown (e) {
			const _this = this
			let resize3 = this.$refs.lineRef
			let startX = e.clientX
			resize3.left = resize3.offsetLeft + 5
			document.onmousemove = function (e) {
				let endX = e.clientX
				let moveLen = resize3.left + (endX - startX)
				if (moveLen < 100) moveLen = 100
				if (moveLen > 500) moveLen = 500
				_this.boxStyle.width = moveLen + 'px'
			}
			document.onmouseup = function () {
				document.onmousemove = null
				document.onmouseup = null
				resize3.releaseCapture && resize3.releaseCapture()
			}
			resize3.setCapture && resize3.setCapture()
			return false
		}
	},
	created () {
	},
	mounted () {
	}
}
</script>

<style lang='less' scoped>

.left-box {
	width: 500px;
	height: 100%;
	position: relative;
	background-color: antiquewhite;
}

.resize3 {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 5px;
	background-color: burlywood;
	cursor: col-resize;
}
</style>
